import cookie from "react-cookie";
import config from "../../libs/config";
import DownDrop from "../downdrop";
import lang from "../../libs/i18";
import Fetch from "../../libs/fetch";
import {URL} from "../../libs/Url";
import {Link} from "react-router";

const Collapse = React.createClass({
    getInitialState(){
        return {
            lang: cookie.load(config.cookie_lang)
        }
    },
    getDefaultProps(){
        return {
            onlogout: function () {

            }
        }
    },
    render(){
        return (
            <div
                className="collapse-bar">
                <a href="javascript:void(0);" onClick={(e) => this.handleClick(e) }
                   className="collapse-btn toggle-btn"><i className="fa fa-bars"></i></a>
                <div className="pull-right" style={{marginRight: 15}}>
                    <ul className="rights">
                        <li>
                            <DownDrop label={(this.state.lang == 'en' ? 'English' : '中文')}>
                                <li><a onClick={(e)=> {
                                    cookie.save(config.cookie_lang, 'cn');
                                    window.location.href = window.location.pathname;
                                }} href="javascript:void(0);">中文</a>
                                </li>
                                <li><a onClick={(e)=> {
                                    cookie.save(config.cookie_lang, 'en');
                                    window.location.href = window.location.pathname;
                                }} href="javascript:void(0);">English</a></li>
                            </DownDrop>
                        </li>
                        <li>
                            <DownDrop
                                label={this.props.user.name || '系统管理员'}
                                img={require('../../imgs/user-avatar.png')}
                            >
                                <li>
                                    <Link to={`/${config.MENUS.PROFILE}`}>
                                        <i className="fa fa-user"></i> {lang.collapse.menu_profile}
                                    </Link>
                                </li>
                                <li>
                                    <Link to={`/${config.MENUS.RESET}`}>
                                        <i className="fa fa-user"></i> {lang.collapse.menu_reset}
                                    </Link>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" onClick={()=> {
                                        this.props.onlogout();
                                    }}>
                                        <i className="fa fa-sign-out"></i> {lang.collapse.menu_logout}
                                    </a>
                                </li>
                            </DownDrop>
                        </li>
                    </ul>
                </div>
            </div>
        )
    },
    handleClick(e)
    {
        this.props.onAddClick();
    }
});

Collapse.propTypes = {
    onAddClick: React.PropTypes.func.isRequired,
};
export default Collapse;
